<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>景旭商城-我的密码</title>
<%@ include file="/page/pc/include.jsp"%>
</head>
<body>
	<div class="wrap">
		<jsp:include page="../_my_header.jsp" />
		<div class="site_wrap18">
			<div class="site_wrap18_con">
				<div class="main">
					<jsp:include page="../_my_left.jsp" />
					<div class="rightitem">

						<div class="mod_part">
							<div class="hd">
								<h3>修改登录密码</h3>
							</div>
							<div class="bd">
								<div class="mod_part1">
									<div class="mod_steplist">
										<ul>
											<li id="stepLi1" <c:if test="${step == '1' }"> class="current" </c:if>><i></i> <em>1</em> <b>验证身份</b></li>
											<li id="stepLi2"><i></i> <em>2</em> <b>修改登录密码</b></li>
											<li id="stepLi3" <c:if test="${step == '3' }"> class="current" </c:if>><i></i> <em>3</em> <b>完成</b></li>
										</ul>
										<input type="hidden" name="mobile" id="mobile" value="${mobile }">
									</div>
									<div class="mod_form">
										<c:choose>
											<c:when test="${step == 1 }">
												<%-- 输入手机验证码 开始 --%>
												<div id="modDiv1" style="display: block;">
													<dl>
														<dt>
															<strong>已验证手机号：</strong>
															<div class="txt1">
																<b>${mobileView }</b>
															</div>
														</dt>
														<dt>
															<strong>填写手机校验码：</strong>
															<div class="txt1">
																<input type="text" id="mobileCode" class="inputstyle1" /><a href="#" id="btnSend" class="btn1">获取短信验证码</a>
															</div>
														</dt>
														<dt>
															<strong>&nbsp;</strong>
															<div class="txt1">
																<input type="button" onclick="javascript: doCheckMobileCode();" class="btn-success" value="提交" />
															</div>
														</dt>
													</dl>
												</div>
												<%-- 输入手机验证码 结束 --%>
												<%-- 输入新密码 开始 --%>
												<div id="modDiv2" style="display: none;">
													<dl>
														<dt>
															<strong>输入新密码：</strong>
															<div class="txt1">
																<input type="password" id="password" class="inputstyle1" />
															</div>
														</dt>
														<dt>
															<strong>确认新密码：</strong>
															<div class="txt1">
																<input type="password" id="passwordConfirm" class="inputstyle1" />
															</div>
														</dt>
														<dt>
															<strong>&nbsp;</strong>
															<div class="txt1">
																<input type="button" onclick="javascript: doModPwd();" class="btn-success" value="提交" />
															</div>
														</dt>
													</dl>
												</div>
												<%-- 输入新密码 结束 --%>
											</c:when>
											<c:when test="${step == 3 }">
												<%-- 完成 开始 --%>
												<div id="modDiv3" class="mod_success" style="display: block;">
													<p>
														<i></i><span>恭喜！密码修改成功</span>
													</p>
												</div>
												<%-- 完成 结束 --%>
											</c:when>
											<c:otherwise>
												<%-- 输入手机验证码 开始 --%>
												<div id="modDiv1" style="display: block;">
													<dl>
														<dt>
															<strong>已验证手机号：</strong>
															<div class="txt1">
																<b>${mobileView }</b>
															</div>
														</dt>
														<dt>
															<strong>填写手机校验码：</strong>
															<div class="txt1">
																<input type="text" id="mobileCode" class="inputstyle1" /><a href="#" id="btnSend" class="btn1">获取短信验证码</a>
															</div>
														</dt>
														<dt>
															<strong>&nbsp;</strong>
															<div class="txt1">
																<input type="button" onclick="javascript: doCheckMobileCode();" class="btn-success" value="提交" />
															</div>
														</dt>
													</dl>
												</div>
												<%-- 输入手机验证码 结束 --%>

												<%-- 输入新密码 开始 --%>
												<div id="modDiv2" style="display: none;">
													<dl>
														<dt>
															<strong>输入新密码：</strong>
															<div class="txt1">
																<input type="password" id="password" class="inputstyle1" />
															</div>
														</dt>
														<dt>
															<strong>确认新密码：</strong>
															<div class="txt1">
																<input type="password" id="passwordConfirm" class="inputstyle1" />
															</div>
														</dt>
														<dt>
															<strong>&nbsp;</strong>
															<div class="txt1">
																<input type="button" onclick="javascript: doModPwd();" class="btn-success" value="提交" />
															</div>
														</dt>
													</dl>
												</div>
												<%-- 输入新密码 结束 --%>
												<%-- 完成 开始 --%>
												<div id="modDiv3" class="mod_success" style="display: none;">
													<p>
														<i></i><span>恭喜！密码修改成功</span>
													</p>
												</div>
												<%-- 完成 结束 --%>
											</c:otherwise>
										</c:choose>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div>
		<!---网站底部开始-->
		<jsp:include page="../../footer.jsp?showQaFlag=0" />
		<!---网站底部结束-->
	</div>
	<script type="text/javascript">
		function doCheckMobileCode() {
			// 校验手机短信验证码
			var mobile = $("#mobile").val();
			var mobileCode = $("#mobileCode").val();
			if(!mobileCode) {
				layer.msg('请输入短信验证码！', {
					icon : 2
				});
				return;
			}
			$.ajax({
				url : rootPath + "/pc/my/checkMobileCode",
				type : "post",
				async : false,
				dataType : 'json',
				data : {
					mobile : mobile,
					mobileCode : mobileCode
				},
				success : function(json) {
					if (json.code == '1') {
						$("#stepLi1").removeClass("current");
						$("#stepLi2").addClass("current");
						$("#modDiv1").hide();
						$("#modDiv2").show();
					} else {
						layer.msg('验证码错误！', {
							icon : 2
						});
					}
				}
			});
		}
		/**
		 * 执行修改密码
		 */
		function doModPwd() {
			var mobile = $("#mobile").val();
			var password = $("#password").val();
			var passwordConfirm = $("#passwordConfirm").val();
			if(!password || !passwordConfirm ) {
				layer.msg('请输入密码！', {
					icon : 2
				});
				return;
			}
			if(password.length < 6 || password.length > 20) {
				layer.msg('密码长度请限制在6-20位！', {
					icon : 2
				});
				return;
			}
			if(password != passwordConfirm ) {
				layer.msg('两次密码输入不一致！', {
					icon : 2
				});
				return;
			}
			window.location.href = rootPath + "/pc/my/modpwd?mobile=" + mobile + "&password=" + password;
		}
	 
		// 验证码计时任务定义
		var timer;
		/**
		 * 发送手机验证码
		 */
		$("#btnSend").click(function() {
			window.clearInterval();
			clearInterval(timer);
			var mobile = $("#mobile").val();
			if (!(/^1\d{10}$/.test(mobile))) {
				layer.msg('您尚未绑定正确的手机号码！', {
					icon : 2
				});
				return;
			}
			// 生成短信验证码，并置灰按钮
			$.ajax({
				url : rootPath + "/pc/my/sendMobileCode",
				type : "post",
				async : false,
				dataType : 'json',
				data : {
					mobile : mobile
				},
				success : function(json) {
					if (json.code == '1') {
						$("#btnSend").html("60");
						$("#btnSend").attr('disabled', true);
						timer = setInterval(reSetMobileBtn, 1000);
					} else {
						layer.msg('短信发送失败，请重新发送！', {
							icon : 2
						});
					}
				}
			});
		});

		/**
		 * 重置按钮
		 */

		function reSetMobileBtn() {
			var time = $("#btnSend").html();
			if (time > 1) {
				time--;
				$("#btnSend").html(time);
			} else {
				$("#btnSend").html("再次发送");
				$("#btnSend").attr('disabled', false);
				clearInterval(timer);
				window.clearInterval();
			}
		}
	</script>
</body>
</html>